<template>
  <div id="plan"></div>
</template>

<script>
import * as echarts from "echarts";
import "echarts-gl";

export default {
  data() {
    return {
      xDatas: [
        "1月",
        "2月",
        "3月",
        "4月",
        "5月",
        "6月",
        "7月",
        "8月",
        "9月",
        "10月",
        "11月",
        "12月",
      ],
      yDatas: [3, 6, 1, 9, 3, 10, 3, 8, 3, 0, 0, 0],
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    // 排期计划(立体柱状图)
    init() {
      let chartDom = document.getElementById("plan");
      let myChart = echarts.init(chartDom);
      myChart.clear();
      let that = this;
      let option = {
        backgroundColor: "transparent",
        // tooltip: {
        //   trigger: 'axis',
        // },
        xAxis: {
          type: "category",
          data: that.xDatas,
          axisLine: {
            show: false, //隐藏X轴轴线
            lineStyle: {
              color: "#404040",
            },
          },
          axisTick: {
            show: false, //隐藏X轴刻度
          },
          axisLabel: {
            show: true,
            margin: 18,
            textStyle: {
              color: "#fff", //X轴文字颜色
            },
            interval: 0,
          },
        },
        yAxis: {
          type: "value",
          show: true,
          gridIndex: 0,
          splitLine: {
            show: true,
            lineStyle: {
              color: "#09426b",
            },
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: "#09426b",
            },
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: "#fff", //X轴文字颜色
            },
          },
        },
        grid: {
          top: "12%",
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        series: [
          {
            data: that.yDatas,
            type: "custom",
            barWidth: 1000, // 柱子宽度核心代码
            renderItem: function (params, api) {
              return that.getRenderItem(params, api);
            },
            label: {
              show: true,
              position: "top",
              formatter: "{c}",
              textStyle: {
                // fontSize: fontSize(12),
                color: "#fff",
                align: "center",
              },
            },
          },
        ],
      };
      option && myChart.setOption(option);
    },
    getRenderItem(params, api) {
      // 主子索引值
      const { seriesIndex } = params;
      // 基础坐标
      const basicsCoord = api.coord([api.value(seriesIndex), api.value(1)]);
      // 顶部基础y轴
      const topBasicsYAxis = basicsCoord[1];
      // 基础x轴
      const basicsXAxis = basicsCoord[0];
      // 底部基础y轴
      const bottomYAxis = api.coord([api.value(seriesIndex), 0])[1];
      this.setThreeShaps();
      return {
        type: "group",
        children: [
          {
            type: "leftShape",
            shape: {
              topBasicsYAxis,
              basicsXAxis,
              bottomYAxis,
            },
            style: {
              ...api.style(),
              fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#4cf0f9" },
                { offset: 1, color: "#188df0 " },
              ]), // 覆盖基础样式
              text: "",
            },
          },
          {
            type: "rightShape",
            shape: {
              topBasicsYAxis,
              basicsXAxis,
              bottomYAxis,
            },
            style: {
              ...api.style(),
              fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#4cf0f9" },
                { offset: 1, color: "#188df0 " },
              ]), // 覆盖基础样式
              text: "",
            },
          },
          {
            type: "topShape",
            shape: {
              topBasicsYAxis,
              basicsXAxis,
              bottomYAxis,
            },
            style: {
              ...api.style(),
              fill: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                { offset: 0, color: "#4cf0f9" },
                { offset: 1, color: "#188df0 " },
              ]), // 覆盖基础样式
            },
          },
        ],
      };
    },
    setThreeShaps() {
      // 绘制柱状体三个面的图形并注册
      const leftShape = echarts.graphic.extendShape({
        buildPath(ctx, shape) {
          const { topBasicsYAxis, bottomYAxis, basicsXAxis } = shape;
          // 侧面宽度
          const WIDTH = 15;
          // 斜角高度
          const OBLIQUE_ANGLE_HEIGHT = 9;
          const p1 = [basicsXAxis - WIDTH, topBasicsYAxis + OBLIQUE_ANGLE_HEIGHT]; // 左上角坐标
          const p2 = [basicsXAxis - WIDTH, bottomYAxis + OBLIQUE_ANGLE_HEIGHT]; // 左下角坐标
          const p3 = [basicsXAxis, bottomYAxis + OBLIQUE_ANGLE_HEIGHT]; // 右下角坐标
          const p4 = [basicsXAxis, topBasicsYAxis + OBLIQUE_ANGLE_HEIGHT]; // 右上角坐标
          ctx.moveTo(p1[0], p1[1]);
          ctx.lineTo(p2[0], p2[1]);
          ctx.lineTo(p3[0], p3[1]);
          ctx.lineTo(p4[0], p4[1]);
        },
      });
      const rightShape = echarts.graphic.extendShape({
        buildPath(ctx, shape) {
          const { topBasicsYAxis, bottomYAxis, basicsXAxis } = shape;
          // 侧面宽度
          const WIDTH = 6;
          // 斜角高度
          const OBLIQUE_ANGLE_HEIGHT = 9;
          const p1 = [basicsXAxis, topBasicsYAxis + OBLIQUE_ANGLE_HEIGHT]; // 左上角坐标
          const p2 = [basicsXAxis, bottomYAxis + OBLIQUE_ANGLE_HEIGHT]; // 左下角坐标
          const p3 = [basicsXAxis + WIDTH, bottomYAxis]; // 右下角坐标
          const p4 = [basicsXAxis + WIDTH, topBasicsYAxis]; // 右上角坐标
          ctx.moveTo(p1[0], p1[1]);
          ctx.lineTo(p2[0], p2[1]);
          ctx.lineTo(p3[0], p3[1]);
          ctx.lineTo(p4[0], p4[1]);
        },
      });
      const topShape = echarts.graphic.extendShape({
        buildPath(ctx, shape) {
          const { topBasicsYAxis, basicsXAxis } = shape;
          // 侧面宽度
          const LEFT_WIDTH = 15;
          const RIGHT_WIDTH = 6;
          // 斜角高度
          const OBLIQUE_ANGLE_HEIGHT = 9;
          const p1 = [basicsXAxis, topBasicsYAxis + OBLIQUE_ANGLE_HEIGHT]; // 右下角坐标
          const p2 = [basicsXAxis + RIGHT_WIDTH, topBasicsYAxis]; // 右上角坐标
          const p3 = [basicsXAxis + RIGHT_WIDTH - LEFT_WIDTH, topBasicsYAxis]; // 左上角坐标
          const p4 = [basicsXAxis - LEFT_WIDTH, topBasicsYAxis + OBLIQUE_ANGLE_HEIGHT]; // 左下角坐标
          ctx.moveTo(p1[0], p1[1]);
          ctx.lineTo(p2[0], p2[1]);
          ctx.lineTo(p3[0], p3[1]);
          ctx.lineTo(p4[0], p4[1]);
        },
      });
      echarts.graphic.registerShape("leftShape", leftShape);
      echarts.graphic.registerShape("rightShape", rightShape);
      echarts.graphic.registerShape("topShape", topShape);
    },
  },
};
</script>

<style scoped>
#plan {
  width: 480px;
  height: 300px;
  overflow: hidden;
  background-size: 100% 100%;
}
</style>
